<template>
    <view class="x-layout">
        <ForOneHeader :enableBack="true" />
        <view class="swipe-container">



            <view v-if="tab_list.length > 0">
                <swiper class="y-swipe" :circular="circular" current="0" :vertical="true"
                    @animationfinish="handleChange">
                    <swiper-item class="plane" v-for="(item, index) in currentQ" :key="index">
                        <view class="y-plane">
                            <view class="layout" >

                                <view class="bottom">
                                    <view style="color: aliceblue; padding-bottom: 10rpx;padding-left: 30rpx;">{{
                                        item.title }}</view>
                                    <view class="profile">
                                        <view class="profile-left">
                                            <view class="avatar">
                                                <up-image class="avatar-image" height="100rpx" mode="aspectFill"
                                                    width="100rpx" :src="item.avatar_url" :showMenuByLongpress="false">
                                                </up-image>
                                            </view>
                                            <view class="flex-column align-left">
                                                <view class="zh align-left">会一美装板</view>
                                                <!-- <view class="counts align-left" style="width: 100%;">30个作品</view> -->
                                            </view>
                                        </view>

                                        <view class="profile-right">
                                            <u-button size="small" type="success" open-type="share" @click="onShareAppMessage">分享</u-button>
                                        </view>
                                    </view>
                                </view>
                                <view class="video">
                                    <video :id="'vc' + index" class="video-player" :src="item.video_url">
                                    </video>
                                </view>

                            </view>
                        </view>
                    </swiper-item>


                </swiper>
            </view>


            <u-loadmore :status="status" v-else />
        </view>



    </view>
</template>

<script setup lang="ts">

import { onMounted, ref, defineProps, onBeforeMount, nextTick } from 'vue'
import { useSettingStore } from '@/store/setting'
import { shareUtils } from '@/utils/share'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

import { getVideoCenterById } from '@/api/video'

const settingStore = useSettingStore()


const status = ref('nomore')
const avatar_url = ref('')

const currentSwipe = ref(0)
const currentTab = ref(0)
const tab_list = ref([])

const currentQ = ref([]) //length = 3

const circular = ref(false)

const lastCur = ref(1)

const videoContext = ref([])

const invalid_down = ref(0)
const invalid_up = ref(0)


const nextQ = ref([])
const prevQ = ref([])
const change = ref(-1)

const props = defineProps({
    id: {
        type: Number,
        default: 0
    },
    from_url: {
        type: String,
        default: ''
    }
})



const play = (current: Number) => {


    videoContext.value.forEach(function (ctx, index) {
        if (index !== current) {
            ctx.pause()
        } else {
            ctx.seek(0)
            ctx.play()
        }

    });
}

const current_video = ref(null);



const handleChange = (e: any) => {

    const { current } = e.detail

    const diff = current - lastCur.value
    current_video.value = currentQ.value[current]
    play(current)
    if (diff === 0) {
        return
    }



    lastCur.value = current

    const direction = (diff === 1 || diff === -2) ? 'up' : 'down'

    // debugger
    if (direction === 'up') {

        if (invalid_down.value == 0) {
            const _change = (change.value + 1) % 3

            const add = nextQ.value.shift()

            const remove = currentQ.value[_change]




            if (add) {


                prevQ.value.push(remove)


                currentQ.value[_change] = add

                change.value = _change
            } else {

                invalid_up.value += 1
                // debugger



            }

        } else {
            invalid_down.value -= 1
        }



    } else {


        if (invalid_up.value == 0) {



            const _change = change.value

            const add = prevQ.value.pop()

            const remove = currentQ.value[_change]

            if (add) {

                nextQ.value.unshift(remove)
                currentQ.value[_change] = add             //remove the first element of currentQ

                change.value = (_change + 2) % 3
            } else {

                invalid_down.value += 1
                // debugger
            }

        } else {
            invalid_up.value -= 1
        }

    }


    let _circular = true



    if (nextQ.value.length === 0 && current !== 0) {

        _circular = false
    }

    if (current !== 2 && prevQ.value.length === 0) {

        _circular = false
    }

    // debugger
    circular.value = _circular



}
onBeforeMount(() => {



    if (props.id) {

        getVideoCenterById(props.id).then(data => {
            // debugger

            avatar_url.value = data.video_avatar

            tab_list.value = data

            const videolist = tab_list.value

            nextQ.value = videolist;

            const cur = nextQ.value.slice(0, 3);

            const left_next = nextQ.value.slice(3, videolist.length)

            currentQ.value = cur

            nextQ.value = left_next

            current_video.value = currentQ.value[0]


        })
    } else {

        settingStore.initSettingListByStore().then(() => {


            avatar_url.value = settingStore.setting.video_avatar

            tab_list.value = settingStore.setting.video_list

            const videolist = tab_list.value

            nextQ.value = videolist;

            const cur = nextQ.value.slice(0, 3);

            const left_next = nextQ.value.slice(3, videolist.length)

            currentQ.value = cur

            nextQ.value = left_next

            current_video.value = currentQ.value[0]



        })
    }



})
const click = (item: any) => {

    currentTab.value = item.index
    currentSwipe.value = item.index
}

const onChange = (e) => {

    currentTab.value = e.detail.current

}


onMounted(() => {

    nextTick(() => {

        videoContext.value = [0, 1, 2].map((index) => {

            return uni.createVideoContext('vc' + index)
        })
        setTimeout(() => {
            const video = videoContext.value[0]
            video.play()
        }, 500)


    })
})

const page = getCurrentPages().pop()


let path: string = shareUtils.buildPathQuery(`/${page?.route}?id=${props.id}&from_url=${props.from_url}`)
onShareTimeline(() => {
    return {
        title: current_video.value.title,
        imageUrl: current_video.value.poster_url,
        path
    }
})
onShareAppMessage(() => {
    debugger
    return {
        title: current_video.value.title,
        imageUrl: current_video.value.poster_url,
        path
    }
})

</script>

<style scoped>
.y-plane {
    width: 100%;
    height: calc(100vh - 128rpx);
    background-color: #000;
    color: aliceblue;
}

.y-swipe {
    width: 100%;
    height: calc(100vh - 128rpx);
}

.layout {
    position: relative;
    height: calc(100vh - 128rpx);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.video {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-player {
    width: 100%;
    height: 100%;
}

.profile {


    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 30rpx;
    padding-bottom: 30rpx;

}

.bottom {

    position: absolute;
    bottom: 0rpx;
    left: 0rpx;
    z-index: 100;
    width: 100%;
}

.avatar {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100rpx;
    width: 100rpx;
    border-radius: 50rpx;
    overflow: hidden;
    border: 4rpx solid #fff;
}

.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.align-left {
    text-align: left;

}

.zh {
    width: 200rpx;
}

.counts {
    font-size: 20rpx;
    color: #fff;

}

.profile-left {
    display: flex;
    justify-content: space-between;
    width: 330rpx;
    align-items: center;
}

.profile-right {

    padding-right: 100rpx;
}

.x-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
}



.x-swipe {
    width: 100%;
    height: calc(100vh - 50rpx);
}

.swipe-container {
    width: 100%;
    height: calc(100vh - 128rpx);

}



.tabs {
    height: 100rpx;
}
</style>
